<template>
  <!--我的体验券页面-->
  <div>
    <ul v-if="vipcardList.length<=0" class="null_content">
      <li><img src="../../../assets/null.png" alt="" width="155"></li>
      <li>这里空空如也</li>
    </ul>
    <div class="page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
      <wv-group
        v-infinite-scroll="getList"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10"
      >
        <ul class="list">
          <li v-for="item in vipcardList">
            <p>
              <img :src="item.coverImg | imgPathFilter" alt="" width="160" height="101">
              <span @click="goTiYanQuanDetail(item.accountGoodsId)" v-if="item.isPrivatedata==1">查看权益</span>
            </p>
            <ul>
              <li>{{item.goodsName}}</li>
              <li><span @click.stop="goGive(item.accountGoodsId)" style="margin-left: 50px">转赠</span></li>
              <li v-if="item.isPrivatedata==2 && (item.vipCardState==1|| item.vipCardState==0)"
                  @click="goWanshan(item.accountGoodsId,item.vipcardCategoryCode)">
                <img src="../../../assets/warn.png" alt="" width="15">完善资料
              </li>
            </ul>
          </li>
        </ul>
      </wv-group>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {getUserTiyanVipcard} from '../../../../test/unit/http'
  import {Toast} from 'we-vue'

  export default {
    name: 'tiyanquan',
    props: {},
    data() {
      return {
        vipcardList: [],
        wrapperHeight: 0,
        page: 1,
        rows: 8,
        loading: false
      };
    },
    methods: {
      getList() {
        let params = {
          page: this.page,
          rows: this.rows
        };
        this.getData(params);
      },
      getData(params) {
        getUserTiyanVipcard(params).then(res => {
          console.info('res', res);
          if (res.code == 100) {
            let data = res.object;
            let list = data.rows;
            let pages = data.pages;
            this.pages = pages;
            let totalNum = data.totalNum;
            this.totalNum = totalNum;
            if (list.length > 0) {
              this.vipcardList = this.vipcardList.concat(list);
            }
            if (this.page < this.pages) {
              this.page++;
              this.loading = false
            } else {
              this.loading = true
            }
          } else {
            Toast.fail(res.info)
          }
        })
      },
      goSaomaDetail(accountGoodsId) {
        this.$router.push({path: 'saomadetail', query: {accountGoodsId: accountGoodsId}})
      },
      goGive(accountGoodsId) {
        this.$router.push({path: 'tiyanzhuanzeng', query: {accountGoodsId: accountGoodsId}})
      },
      goTiYanQuanDetail(accountGoodsId) {
        this.$router.push({path: 'tiyanquandetail', query: {accountGoodsId: accountGoodsId}})
      },
      goWanshan(accountGoodsId, vipcardCategoryCode) {
        if (vipcardCategoryCode == 'VIP') {
          this.$router.push({path: 'wanshanziliao', query: {accountGoodsId: accountGoodsId, type: 2}})
        }
        if (vipcardCategoryCode == 'GUEST') {
          this.$router.push({path: 'yaokewanshan', query: {accountGoodsId: accountGoodsId, type: 2}})
        }
      },
    },
    created() {
    },
    components: {}
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .null_content {
    padding-top: 50%;

    li:nth-child(2) {
      margin: 10px 0 20px;
      color: #bababa;
      font-size: 14px;
    }
  }

  .offer {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    background-image: linear-gradient(to left, #4c92ed, #61beec);
    height: 50px;
    line-height: 50px;
    color: #fff;
  }

  .list {
    > li {
      display: flex;
      border-bottom: 1px solid #ddd;
      margin: 10px;
      padding-bottom: 10px;

      p, ul {
        flex: 1;
      }

      p {
        text-align: left;
        font-size: 13px;
        color: #fff;
        position: relative;
        width: 160px;

        span {
          position: absolute;
          background-color: rgba(0, 0, 0, 0.3);
          width: 160px;
          height: 101px;
          border-radius: 6px;
          top: 0;
          left: 0;
          text-align: center;
          line-height: 101px;

          img {
            vertical-align: middle;
            margin-right: 5px;
          }
        }
      }

      ul {
        text-align: right;

        li:first-child {
          font-size: 16px;
          color: #111;
          margin-bottom: 53px;
        }

        li:last-child {
          color: #2c92f0;
          font-size: 16px;

          img {
            vertical-align: sub;
            margin-right: 5px;
          }

          &.disabled {
            color: #999;
          }
        }

      }
    }

    > li:last-child {
      border-bottom: none;
    }
  }

</style>

